<template>
	<!--楼盘列表 Houseslist.vue -->
	<div class="house-list">
		<!--:style="`background-image: url(${item.logo});`"-->
		<div class="house-top clearfix" :style="`background-image: url(${data.cover});`" @click="toUrl('/insidepage',{id:data.id})">
			<div class="house-img" :style="`background-image: url(${data.logo});`"></div>
			<div class="house-details">
				<div class="details-title">
					{{data.title}}
				</div>
				<div class="details">
					{{data.desc}}
				</div>
				<div class="telephone">
					TEL：{{data.phone}}
				</div>
			</div>
		</div>
		<div class="details-list">
			<div class="bg-rote"></div>
			<div class="bg-line"></div>
			<div class="list-box">
				<div class="list-particulars" v-for="(item,index) in list" @click="toUrl('/insidepage',{id:item.id})">
					<div class="details-left" :style="`background-image: url(${item.cover});`">
					</div>
					<div class="details-right">
						<div class="right-title">
							{{item.title}}
						</div>
						<div class="particulars">
							{{item.address}}
						</div>
						<div class="cost">
							<span>参考均价:</span><span>{{item.reference_price}}</span><span>元/㎡</span>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<style rel="stylesheet/scss" lang="scss">
	@import "../assets/sass/common/tool.scss";
	.house-list {
		width: 100%;
		background: url(../assets/img/bgrout.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		.house-top {
			width: r(750px);
			height: r(287px);
			background-size: 100%;
			.house-img {
				float: left;
				width: r(200px);
				height: r(197px);
				margin: r(45px) r(36px) r(44px) r(44px);
				background-size: 100%;
			}
			.house-details {
				float: left;
				width: r(418px);
				.details-title {
					width: r(289px);
					height: r(50px);
					line-height: r(50px);
					margin-top: r(62px);
					font-family: PingFangSC-Medium;
					font-size: r(36px);
					color: #FFFFFF;
					margin-bottom: r(9px);
				}
				.details {
					width: r(418px);
					height: r(65px);
					line-height: r(34px);
					overflow: hidden;
					font-family: HYQiHei-EZS;
					font-size: r(28px);
					color: #FFFFFF;
					margin-bottom: r(16px);
				}
				.telephone {
					width: r(267px);
					height: r(34px);
					line-height: r(34px);
					font-family: HYQiHei-EZS;
					font-size: r(28px);
					color: #D8D8D8;
				}
			}
		}
		.details-list {
			.bg-rote {
				width: r(144px);
				height: r(275px);
				transform: rotateY(-180deg);
				background: url(../assets/img/yunduo.png) no-repeat;
				background-size: r(144px) r(275px);
				position: absolute;
				right: r(-20px);
				top: r(321px);
				z-index: 0;
			}
			.bg-line {
				width: r(513px);
				height: r(200px);
				overflow: hidden;
				background: url(../assets/img/xiantiaob.png) no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: r(-79px);
				bottom: r(-13px);
				z-index: 0;
			}
			.list-box {
				position: absolute;
				left: 6%;
				right: 6%;
				z-index: 12;
				.list-particulars {
					margin-top: r(26px);
					z-index: 1;
					width: r(659px);
					height: r(247px);
					margin: 0 auto;
					background: #FFFFFF;
					.details-left {
						display: inline-block;
						width: r(200px);
						height: r(200px);
						margin: r(24px) r(25px) r(23px) r(33px);
						background-repeat:no-repeat;
						background-size:contain ;
						overflow: hidden;
					}
					.details-right {
						float: right;
						width: r(401px);
						.right-title {
							width: r(371px);
							height: r(78px);
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							font-size: r(28px);
							color: #4A4A4A;
							margin-top: r(24px);
							margin-bottom: r(17px);
						}
						.particulars {
							width: r(305px);
							height: r(65px);
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							font-family: HYQiHei-EES;
							font-size: r(24px);
							color: #9B9B9B;
							margin-bottom: r(11px);
						}
						.cost {
							width: r(270px);
							height: r(39px);
							line-height: r(39px);
							margin-left: r(85px);
							span {
								font-family: HYQiHei-EES;
								font-size: r(24px);
								color: #9B9B9B;
								&:nth-of-type(2) {
									width: r(84px);
									height: r(39px);
									font-size: r(32px);
									color: #C9563A;
								}
							}
						}
					}
					&:nth-of-type(1) {
						margin-top: r(48px);
					}
					&:not(:first-of-type) {
						margin-top: r(26px);
					}
					&:last-of-type {
						margin-bottom: r(87px);
					}
				}
			}
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				id: tools.url.params('id'),
				data:{},
				list:[],
			}
		},
		methods: {
			getHouse() {
				let that = this,
					ajaxData = {};
				tools.ajax({
					url: '/api/companys/'+that.id,
					ajaxData: ajaxData,
					successFun: function(res) {
						that.data = res.data;
						that.list = res.list.data;
					},
					errorFun: function(error_data, status, headers, error_obj) {
						tools.alert.error(error_data.error_msg);
					},
					type: 'GET'
				});
			}
		},
		watch: {

		},
		components: {

		},
		filters: {

		},
		mounted() {
			this.getHouse()
		}
	}
</script>